<template>
  <div>
    <!-- {{ proCate }} -->
    <!-- 头部按钮和搜索框 -->
    <div class="options">
      <el-button type="primary" size="mini" @click="toAdd">添加</el-button>
      <div>
        <el-input
          size="mini"
          v-model="queryParams.name"
          placeholder="请输入产品名称"
        ></el-input>
      </div>
      <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        border
        size="mini"
        :data="productData"
        height="calc(100vh - 150px)"
        stripe
        style="width: 100%"
      >
        <!-- <el-table-column type=index  prop="" label="编号" width="180">
        </el-table-column> -->
        <el-table-column align="center" type="index" label="编号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="categoryId" label="所属产品"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="toDelete(scope.row)" type="text" size="mini"
              >删除</el-button
            >
            <el-button @click="toEdit(scope.row)" type="text" size="mini"
              >编辑</el-button
            >
            <el-button @click="toDetail(scope.row)" type="text" size="mini"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryParams.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog @close="dialogClose" :title="title" :visible.sync="visible">
      <el-form :rules="rules" ref="ruleForm" :model="form">
        <el-form-item
          prop="name"
          label="产品名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="categoryId"
          label="所属栏目"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.categoryId">
            <el-option
              v-for="(item, index) in proCate"
              :key="index"
              :label="item.categoryId"
              :value="item.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="活动区域" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择活动区域" class='categoryId'>
          <el-option  label="区域一" value="parentId"></el-option>
        </el-select>
      </el-form-item> -->

        <el-form-item
          prop="description"
          label="介绍"
          :label-width="formLabelWidth"
        >
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入vuex或者axios
import { mapActions, mapGetters, mapState } from "vuex";
//导入api
export default {
  data() {
    return {
      // params:{
      //   productData: this.productData,
      // },
      queryParams: {
        page: 1,
        pageSize: 10,
        status: "",
      },
      // productData:this.productData,
      visible: false,
      title: "新增产品信息",
      formLabelWidth: "120px",
      //表单数据
      form: {},
      rules: {
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        categoryId: [
          { required: true, message: "请选择所属栏目", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入描述信息", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState("product", ["proCate"]),
    ...mapGetters("product", ["total", "productData"]),
  },
  methods: {
    ...mapActions("product", [
      "findAll",
      "saveOrUpdate",
      "deleteById",
      "findAllProCate",
    ]),
    
    //查询
    toSearch() {
      this.queryParams.page = 1;
      this.findAll(this.queryParams);
    },
    //添加按钮
    toAdd() {
      //模态框标题
      (this.title = "新增产品信息"), (this.form = {}), (this.visible = true);
      this.findAllProCate();
    },
    //保存按钮
    toSave() {
      this.$refs["ruleForm"].validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log(this.form);
          this.saveOrUpdate({
            form: this.form,
            queryParams: this.queryParams,
          }).then(() => {
            //重置表单
            // this.$refs["ruleForm"].resetFields();
            this.visible = false;
            this.findAll(this.queryParams);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置表单
    dialogClose() {
      this.$refs["ruleForm"].resetFields();
    },
    //编辑
    toEdit(row) {
      console.log(row);
      this.form = { ...row };
      this.title = "修改产品信息";
      this.visible = true;
    },
    //删除
    toDelete(row) {
      console.log(row.id);
      this.deleteById({ id: row.id }).then((res) => {
        this.findAll(this.queryParams);
      });
    },
    //查看详情
    toDetail(row) {
      console.log(row);
      //需要跳路由
      this.$router.push(`/productDetail/${row.id}/index`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.queryParams.page = 1;
      this.findAll(this.queryParams);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.page = val;
      this.findAll(this.queryParams);
    },
  },
  created() {
    this.findAll(this.queryParams);
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.options {
  overflow: hidden;
}
.options > * {
  // overflow: hidden;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  & > div {
    width: 200px;
  }
}
</style>